<template>
    <div>

        <aside>
            <!-- 头像 -->
            <div class="avatar">
                <img :src="pubUse.getAssetsFile('头像.jpg')">
            </div>
            <!-- 菜单 -->
            <div class="meun_box">
                <ul class="menu">
                    <li v-for="(item, index) in menuList" :key="index" @click="changeMenu(item.path)">
                        <img v-if="route.path === item.path" :src="item.active_icon" :alt="item.title" />
                        <img v-else :src="item.icon" :alt="item.title" />
                    </li>
                </ul>
            </div>
            <div class="exit" @click="exit">
                <img :src="pubUse.getAssetsFile('设置.png')">
            </div>
        </aside>
        <div class="ct">
            <router-view></router-view>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import pubUse from '../../utils/pubUse';
const router = useRouter()
const route = useRoute()
router.push({
    name:'message'
})

let token: string = localStorage.getItem('token') || ''
if (!token) {
    router.replace(
        {
            name: 'login'
        }
    )
}
const exit = () => {
    localStorage.setItem('token', JSON.stringify(''))
    router.replace({
        name: 'login'
    })
}
const menuList = reactive([
    {
        title: "消息",
        icon: `${pubUse.getAssetsFile('信息.png')}`,
        active_icon: `${pubUse.getAssetsFile('信息_active.png')}`,
        path: "/home/message",
        isDot: true
    },
    {
        title: "好友",
        icon: `${pubUse.getAssetsFile('好友.png')}`,
        active_icon: `${pubUse.getAssetsFile('好友_active.png')}`,
        path: "/home/contact",
        isDot: true
    },
    {
        title: "空间",
        icon: `${pubUse.getAssetsFile('空间.png')}`,
        active_icon: `${pubUse.getAssetsFile('空间_active.png')}`,
        path: "/home/space",
        isDot: false
    },
    {
        title: "留言板",
        icon: `${pubUse.getAssetsFile('表情.png')}`,
        active_icon: `${pubUse.getAssetsFile('表情_active.png')}`,
        path: "/home/notes",
        isDot: false
    }
])
const changeMenu = (path: string) => {
    router.push(path)
}

</script>

<style scoped lang="scss">
aside {

    position: fixed;
    top: 0;
    left: 0;
    width: 10vw;
    box-sizing: border-box;
    overflow: hidden;


    .meun_box ul {
        width: 6vw;
        margin-left: 3vw;
        overflow: hidden;

        li img {
            width: 50%;
            display: block;
            margin-top: 6vh;
        }
    }
    .avatar{
        width: 3vw;
        height: 3vw;
        margin-left: 3vw;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 5vh;
        img{
            width: 100%;
        }
    }
    .exit{
        width: 3vw;
        height:3vw;
        margin-left: 3vw;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 30vh;
        img{
            width: 100%;
        }
    }

}
.ct{
    position: fixed;
    right: 0;
    top: 0;
    width: 90vw;

}
</style>